<template>
  <div class="card">
    <img :src="item.pic" alt="" />
    <div>
      <aside>
        <b>{{item.name}}</b>
        <p>{{item.characteristic}}</p>
      </aside>
      <article>
        <div>
          <p style="color:red;">￥{{item.minPrice}}</p>
          <p style="color:black;">底价</p>
        </div>
        <div>
          <p>￥{{item.originalPrice}}</p>
          <p>原价</p>
        </div>
        <div>
          <p>{{item.stores}}件</p>
          <p>限量</p>
        </div>
      </article>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  setup(p, { emit }) {
    console.log(p);
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 240px;
  background-color: rgb(255, 255, 255);
  display: flex;
  padding: 15px;
  div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 26px;
    aside {
      display: flex;
      flex-direction: column;
      b{
        margin-bottom: 15px;
        font-size: 29px;
      }
      p{
        color: rgb(133, 127, 127);
      }
    }
    article {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      p{
        margin-bottom: 20px;
        color: rgb(148, 145, 145);
       
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p{
          text-align: center;
        }
      }
    }
  }
  img {
    width: 200px;
    height: 100%;
    margin-right: 20px;
    border-radius: 20px;
  }
}
</style>
